<template>
  <div>
    <div class="demo-input-suffix gl_searchBox">
      <el-row :gutter="20">
        <!-- 版本名称： -->
        <el-col :md="6" :lg="4">
          <p>字典名称</p>
          <!-- <el-select v-model="logTypeValue" :placeholder="$t('search.whole')" size="mini" filterable>
            <el-option v-for="(data,index) in logType" :key="index" :label="data.label" :value="data.label" />
          </el-select> -->
          <el-input v-model="logTypeValue" size="mini" placeholder="请输入组别名称" clearable />
        </el-col>
        <!-- 查询按钮 -->
        <el-col :md="6" :lg="4">
          <el-button style="margin-top:27px" type="primary" size="mini" @click="query()">{{ $t('button.query') }}</el-button>
        </el-col>
      </el-row>
    </div>
    <el-row :gutter="20" class="gl_my_15">
      <!-- 添加客户按钮 -->
      <el-col :md="6" :lg="4">
        <el-button type="primary" size="mini" @click="editOfAdd('add')">添加字典</el-button>
      </el-col>
    </el-row>
    <el-table
      :data="showTableData"
      style="width: 100%"
      stripe
      size="mini"
    >
      <el-table-column
        prop="type"
        label="字典名称"
      />
      <el-table-column
        prop="name"
        label="编码"
      />
      <el-table-column
        prop="operating"
        label="操作"
        width="200"
      >
        <template slot-scope="{row,$index}">
          <el-button type="text" size="mini" @click="editOfAdd(row,$index)">编辑</el-button>
          <el-button type="text" size="mini" @click="delect($index)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-row class="gl_pt_20" style="text-align: center;">
      <el-pagination layout="total,sizes,prev,pager,next,jumper" :total="tableData.length" :page-size="pageSize" :current-page="page" @current-change="handleCurrentChange()" />
    </el-row>
    <test-form ref="testForm" @pushTabelData="getTabelDate" />
  </div>
</template>

<script>
import testForm from './testForm';

export default {
  name: 'Account',
  components: {
    testForm
  },
  data() {
    return {
      logTypeValue: '',
      pageSize: 10,
      page: 1,
      tableData: [{
        type: '男子成人组',
        name: 'CM92305848'
      }, {
        type: '女子成人组',
        name: 'XJP2895734'
      }, {
        type: '男子少年组',
        name: 'GH32858347'
      }],
      showTableData: [],
      logType: [ // 日志类型
        {
          value: 'all',
          label: '全部'
        },
        {
          value: 'loginLog',
          label: '登录日志'
        },
        {
          value: 'handleLog',
          label: '操作日志'
        }
      ]
    };
  },
  created () {
    // 获取数据
    // this.tableData = 你获取的数据
    // this.showTableData = JSON.parse(JSON.stringify(你获取的数据))
    this.showTableData = JSON.parse(JSON.stringify(this.tableData));
  },
  methods: {
    editOfAdd(row, index) {
      this.$refs.testForm.open(row);
    },
    query() {
      let logTypeValue = this.logTypeValue;
      if (logTypeValue === '全部') {
        logTypeValue = '';
      }
      console.log(logTypeValue);
      this.showTableData = this.tableData.filter(item => item.type.includes(logTypeValue));
    },
    // 添加新信息
    getTabelDate(data) {
      this.tableData.push(data);
      this.$refs.testForm.close();
    },
    // 删除
    delect(index) {
      console.log(index);
      this.$confirm('你确定要删除这条信息?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // TODO
        this.tableData.splice(index, 1);
      });
    }
  }
};
</script>

